<template>
	<view>
		<view class="loading-1 sm" v-if="type == 1">
			<text></text>
		</view>
		<view class="loading-2 sm" v-else-if="type == 2">
			<text></text>
			<text></text>
			<text></text>
			<text></text>
			<text></text>
			<text></text>
			<text></text>
			<text></text>
		</view>
		<view class="loading-3 sm" v-else-if="type == 3">
			<view class="loader-line-wrap">
				<view class="loader-line"></view>
			</view>
			<view class="loader-line-wrap">
				<view class="loader-line"></view>
			</view>
			<view class="loader-line-wrap">
				<view class="loader-line"></view>
			</view>
			<view class="loader-line-wrap">
				<view class="loader-line"></view>
			</view>
			<view class="loader-line-wrap">
				<view class="loader-line"></view>
			</view>
		</view>
		<view class="loading-4 sm" v-else-if="type == 4"></view>
		<view class="loading-5 sm" v-else-if="type == 5">
			<view class="dot white"></view>
			<view class="dot"></view>
			<view class="dot"></view>
			<view class="dot"></view>
			<view class="dot"></view>
		</view>
		<view class="loading sm" v-else>
			<text></text>
			<text></text>
			<text></text>
			<text></text>
			<text></text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"sw-loading",
		props:{
			type: String
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style>
.loading-1{
	width: 150px;
	height: 4px;
	border-radius: 2px;
	margin: 0 auto;
	margin-top:100px;
	position: relative;
	background: lightgreen;
	-webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loading-1 text{
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: lightgreen;
	position: absolute;
	margin-top: -7px;
	margin-left:-8px;
	-webkit-animation: changePosition 1.04s ease-in infinite alternate;
}
 @-webkit-keyframes changeBgColor{
	0%{
		background: lightgreen;
	}
	100%{
		background: lightblue;
	}
}
@-webkit-keyframes changePosition{
	0%{
		background: lightgreen;
	}
	100%{
		margin-left: 142px;
		background: lightblue;
	}
}
/* type == 2 */
.loading-2{
	width: 100rpx;
	height: 100rpx;
	position: relative;
	margin: 0 auto;
	margin-top:100px;
}
.loading-2 text{
	display: inline-block;
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	background: lightgreen;
	position: absolute;
	-webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0.2;
	}
}
.loading-2 text:nth-child(1){
	left: 0;
	top: 50%;
	margin-top:-8rpx;
	-webkit-animation-delay:0.13s;
}
.loading-2 text:nth-child(2){
	left: 14rpx;
	top: 14rpx;
	-webkit-animation-delay:0.26s;
}
.loading-2 text:nth-child(3){
	left: 50%;
	top: 0;
	margin-left: -8rpx;
	-webkit-animation-delay:0.39s;
}
.loading-2 text:nth-child(4){
	top: 14rpx;
	right:14rpx;
	-webkit-animation-delay:0.52s;
}
.loading-2 text:nth-child(5){
	right: 0;
	top: 50%;
	margin-top:-8rpx;
	-webkit-animation-delay:0.65s;
}
.loading-2 text:nth-child(6){
	right: 14rpx;
	bottom:14rpx;
	-webkit-animation-delay:0.78s;
}
.loading-2 text:nth-child(7){
	bottom: 0;
	left: 50%;
	margin-left: -8rpx;
	-webkit-animation-delay:0.91s;
}
.loading-2 text:nth-child(8){
	bottom: 14rpx;
	left: 14rpx;
	-webkit-animation-delay:1.04s;
}
/* type == 3 */
.loading-3{
	bottom: 0;
	height: 348rpx;
	left: -30px;
	margin: 0 auto;
	position: relative;
	right: 0;
	top: 85px;
	width: 100rpx;
	/* margin-top: 100rpx; */
	padding-top: 50%;
}
.loading-3 .loader-line-wrap{
	-webkit-animation:spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite;
	animation: spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite;
	box-sizing: border-box;
	height: 50px;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	transform-origin: 50% 100%;
	width: 100px;
}
.loader-line-wrap .loader-line {
	border: 4px solid transparent;
	border-radius: 100%;
	box-sizing: border-box;
	height: 100px;
	left: 0;
	margin: 0 auto;
	position: absolute;
	right: 0;
	top: 0;
	width: 100px;
}
.loader-line-wrap:nth-child(1) { -webkit-animation-delay: -50ms; animation-delay: -50ms; }
.loader-line-wrap:nth-child(2) { -webkit-animation-delay: -100ms; animation-delay: -100ms; }
.loader-line-wrap:nth-child(3) { -webkit-animation-delay: -150ms; animation-delay: -150ms; }
.loader-line-wrap:nth-child(4) { -webkit-animation-delay: -200ms; animation-delay: -200ms; }
.loader-line-wrap:nth-child(5) { -webkit-animation-delay: -250ms; animation-delay: -250ms; }

.loader-line-wrap:nth-child(1) .loader-line {
	border-color: hsl(0, 80%, 60%);
	height: 90px;
	width: 90px;
	top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
	border-color: hsl(60, 80%, 60%);
	height: 76px;
	width: 76px;
	top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
	border-color: hsl(120, 80%, 60%);
	height: 62px;
	width: 62px;
	top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
	border-color: hsl(180, 80%, 60%);
	height: 48px;
	width: 48px;
	top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
	border-color: hsl(240, 80%, 60%);
	height: 34px;
	width: 34px;
	top: 35px;
}
@-webkit-keyframes spin {
	0%, 15% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes spin {
	0%, 15% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}
/* type == 4 */
.loading-4{
	position: relative;
	margin: auto;     
	width: 2.5em;
	height: 2.5em;
	transform: rotate(165deg);
	margin-top:100px;
}
.loading-4:before, .loading-4:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 0.5em;
	height: 0.5em;
	border-radius: 0.25em;
	transform: translate(-50%, -50%);
}
.loading-4:before {
	animation: before 2s infinite;
}
.loading-4:after {
	animation: after 2s infinite;
}

@keyframes before {
	0% {
		width: 0.5em;
		box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
	}
	35% {
		width: 2.5em;
		box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
	}
	70% {
		width: 0.5em;
		box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
	}
	100% {
		box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
	}
}
@keyframes after {
	0% {
		height: 0.5em;
		box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
	}
	35% {
		height: 2.5em;
		box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
	}
	70% {
		height: 0.5em;
		box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
	}
	100% {
		box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
	}
}
/* type == 5 */
.loading-5{
	position: relative;
	margin: auto;
	top: 0; bottom: 0; left: 0; right: 0;
	width: 6.250em; height: 6.250em;
	animation: rotate 2.4s linear infinite;
	margin-top:100px;
}
.loading-5 .white{
	top: 0; bottom: 0; left: 0; right: 0;
	background: white; 
	animation: flash 2.4s linear infinite;
	opacity: 0;
}
.loading-5 .dot{
	position: absolute;
	margin: auto;
	width: 2.4em; height: 2.4em;
	border-radius: 100%;
	transition: all 1s ease;
}
.loading-5 .dot:nth-child(2) { top: 0; bottom: 0; left: 0; background: #FF4444; animation: dotsY 2.4s linear infinite; }
.loading-5 .dot:nth-child(3) { left: 0; right: 0; top: 0; background: #FFBB33; animation: dotsX 2.4s linear infinite; }
.loading-5 .dot:nth-child(4) { top: 0; bottom: 0; right: 0; background: #99CC00; animation: dotsY 2.4s linear infinite; }
.loading-5 .dot:nth-child(5) { left: 0; right: 0; bottom: 0; background: #33B5E5; animation: dotsX 2.4s linear infinite; }
@keyframes rotate {
  0% { transform: rotate( 0 ); }
  10% { width: 6.250em; height: 6.250em; }
  66% { width: 2.4em; height: 2.4em; }
  100%{ transform: rotate(360deg); width: 6.250em; height: 6.250em; }
}

@keyframes dotsY {
  66% { opacity: .1; width: 2.4em; }
  77%{ opacity: 1; width: 0; }
}
@keyframes dotsX {
  66% { opacity: .1; height: 2.4em;}
  77%{ opacity: 1; height: 0; }
}

@keyframes flash {
  33% { opacity: 0; border-radius: 0%; }
  55%{ opacity: .6; border-radius: 100%; }
  66%{ opacity: 0; }
}
/* 默认 */
.loading{
	width: 60px;
	height: 100px;
	margin: 0 auto;
	margin-top:100px;
}
.loading text{
	display: inline-block;
	width: 8px;
	height: 100%;
	border-radius: 4px;
	background: lightgreen;
	-webkit-animation: load 1s ease infinite;
}
@-webkit-keyframes load{
	0%,100%{
		height: 40px;
		background: lightgreen;
	}
	50%{
		height: 70px;
		margin: -15px 0;
		background: lightblue;
	}
}
.loading text:nth-child(2){
	-webkit-animation-delay:0.2s;
}
.loading text:nth-child(3){
	-webkit-animation-delay:0.4s;
}
.loading text:nth-child(4){
	-webkit-animation-delay:0.6s;
}
.loading text:nth-child(5){
	-webkit-animation-delay:0.8s;
}
</style>
